<template>
	<view class="page-template">
    <PageHeader :title="props.title" />
    <view :class="props.title ? 'page-content' : 'no-header-page-content'">
      <slot></slot>
    </view>
	</view>
</template>

<script setup>
import PageHeader from '@/components/PageHeader.vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  }
})
</script>

<style scoped lang="scss">

.page-template {
  width: 100%;
  height: 100%;
}

.page-content {
  height: calc(100% - $title-height);
  overflow: auto;
}

.no-header-page-content {
  height: calc(100%);
  overflow: auto;
}

.page-content > view, .no-header-page-content > view {
  height: 100%;
}

.page-footer {
  flex-shrink: 0;
}

</style>